<template>
  <div>
    <el-row type="flex">
      <base-arr-item
        v-for="(it, index) in arrData"
        :key="it.index"
        :value="it.value"
        :select="it.select"
        :index="index"
      ></base-arr-item>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import BaseArrItem from "@/components/BaseArrItem.vue";
import { CreateArrItem } from "@/utils/CreateArrItem.js";

function* ArrNext() {
  let index = 0;
  for (let i = 0; i < this.arrData.length; i++) {
    index = i;
    for (let j = i + 1; j < this.arrData.length; j++) {
      yield [index, j];
      yield true;
      if (this.arrData[index].value < this.arrData[j].value) {
        index = j;
      }
    }
    if (index !== i) {
      [this.arrData[i].value, this.arrData[index].value] = [
        this.arrData[index].value,
        this.arrData[i].value,
      ];
    }
  }
}

export default {
  name: "Bubbling",
  components: {
    BaseArrItem,
  },
  data() {
    let arrData = [];
    for (let i = 0; i < 10; i++) {
      arrData.push(new CreateArrItem(Math.floor(10 + Math.random() * 80), i));
    }
    return {
      arrData: arrData,
    };
  },
  created() {
    const c = ArrNext.call(this);
    let cv = c.next();
    let item = null;
    clearInterval(item);
    item = setInterval(() => {
      this.arrData.forEach((val) => {
        this.$set(val, "select", false);
      });
      if (typeof cv.value == "object") {
        this.$set(this.arrData[cv.value[0]], "select", true);
        this.$set(this.arrData[cv.value[1]], "select", true);
      }
      // if (typeof cv.value != "object" && cv.value) {
      //   return;
      // }
      if (cv.done) {
        clearInterval(item);
      }
      cv = c.next();
    }, 1000);
  },
};
</script>


